[#ftl]
[@define "agile.BorderEdgeEditor","agile._MetadataEditor"]	
[#assign templateString]
<div>
	<div style="display:inline;margin-left:2px" data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderWidth" title="{i18n_border_width_tooltip}" data-dojo-props="options:'thin,medium,thick,0',unit:'px',defValue:'0px',required:true,placeHolder:'width'"></div>
	<div style="display:inline;margin-left:2px" data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderStyle" title="{i18n_border_style_tooltip}" data-dojo-props="options:'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,ouset',required:true,placeHolder:'style'"></div>
	<div style="display:inline;margin-left:2px" data-dojo-type='agile.ColorSelector' data-dojo-attach-point="borderColor" title="{i18n_border_color_tooltip}" data-dojo-props="required:true"></div>
	<div style="display:inline;margin-left:2px" class="agileClearButton" data-dojo-attach-point="clearButton" title="{i18n_clear_tooltip}" valign="centre"></div>
</div>	
[/#assign]
templateString:"${templateString?js_string}",defValue:"0px"
,propertyEditors:["borderWidth","borderStyle","borderColor"]
,init:function(){
   for(var i = 0; i < this.propertyEditors.length; i++){	   		  
	   this[this.propertyEditors[i]].watch("value",lang.hitch(this,function(name,old,value){
		   this.onChange(this.get("value"),null,this.htmlName);
	   }));			
   }
	   
	on(this.clearButton,"click",lang.hitch(this,function(){
		this.reset1("value","");
		this.onChange(this.get("value"),null,this.htmlName);
	}));
}
,get:function(name){
	if(name == "value"){
		var value = lang.replace("{0} {1} {2}",[this.borderWidth.get("value"), this.borderStyle.get("value"), this.borderColor.get("value")]).replace(/null/g,"").trim();
		return value;
	}else{
		this.inherited(arguments);
	}
}
,set:function(name,value){
	if(name == "value"){
		if(value){
			var e = value.split(" ");
			this.borderWidth.reset1("value",e[0]?e[0]:"");
			this.borderStyle.reset1("value",e[1]?e[1]:"");
			this.borderColor.reset1("value",e[2]?e[2]:"");
		}else{
			this.borderWidth.reset1("value","");
			this.borderStyle.reset1("value","");
			this.borderColor.reset1("value","");
		}
	}else if(name == "context"){
		this.context = value;
	}
	else{
		this.inherited(arguments);
	}
}
,reset1:function(name,value){
	if(name == "value"){
		if(value){
			var e = value.split(" ");
			this.borderWidth.reset1("value",e[0]?e[0]:"");
			this.borderStyle.reset1("value",e[1]?e[1]:"");
			this.borderColor.reset1("value",e[2]?e[2]:"");
		}else{
			this.borderWidth.reset1("value","");
			this.borderStyle.reset1("value","");
			this.borderColor.reset1("value","");
		}
	}else if(name == "context"){
		this.context = value;
	}
	else{
		this.inherited(arguments);
	}
}
[/@]
[@define "agile.BorderEditor","agile._XMetadataEditor"]	
	   [#assign templateString]
		<table cellspacing="2px">
			[#list ["left","top","right","bottom"] as edge]
			<tr>
				<td nowrap="true" title="{i18n_border_${edge}_tooltip}" class="tooltip">{i18n_border_${edge}}</td>				
				<td><div data-dojo-type='agile.BorderEdgeEditor' class="peditor" data-dojo-props="name:'border${edge?capitalize}',htmlName:'border-${edge}',defValue:'0px'"></div></td>
			</tr> 
			[/#list]
		</table>
		[/#assign]
	   templateString:"${templateString?js_string}"
[/@]	
